<template>
	<view class="wrapper">
		<u-navbar :title="$t('user.wallet')" @leftClick="goback" bgColor="#66c0b5" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF;">
			<view class="u-nav-slot" slot="right" @click="toDetails">
				{{$t('user.Details')}}
			</view>
		</u-navbar>
		<view class="header-bg"></view>
		<view class="content">

			<view class="cell-group">
				<view class="cell-line" v-for="item in filterList" :key="item.currencyId">
					<view class="cell-line__top">
						<image :src="item.currencyVo.icon + '?' + getTimestamp()" mode="" class="flag-image"></image>
						<view class="cell-line__top__name">
							{{item.currencyVo.currency}}
						</view>
						<view class="cell-line__top__money">
							{{getCurrencyType(item.currencyVo.currency)}} {{parseFloat(item.amount)}}
						</view>
					</view>
					<view class="cell-line__bottom">
						1 : {{parseFloat(item.currencyVo.exRate)}}
					</view>

				</view>
			</view>


			<view class="title mb-40">
				{{$t('user.Trading')}}
			</view>

			<view class="cell-group">
				<view class="cell-item" @click="showMsg">
					<view class="icon">
						<view class="iconfont icon-tianchongxing- my-icon">
						</view>
					</view>
					<view class="cell-text">{{$t('user.Payment-by-Code')}}</view>
					<view class="iconfont icon-jiantou-you arrow-icon"></view>
				</view>
				<!-- 				<view class="cell-item">
					<view class="icon green">
						<view class="iconfont icon-QRcode my-icon">
						</view>
					</view>
					<view class="cell-text">{{$t('user.Face-to-face-Collections')}}</view>
					<view class="iconfont icon-jiantou-you arrow-icon"></view>
				</view> -->
				<view class="cell-item" @click="gotoPage('/pagesUser/bourse/bourse')">
					<view class="icon blue">
						<view class="iconfont icon-quan my-icon">
						</view>
					</view>
					<view class="cell-text">{{$t('user.Trading-Center')}}</view>
					<view class="iconfont icon-jiantou-you arrow-icon"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWalletList
	} from '@/services/user.js'
	export default {
		name: 'Wallet',
		data() {
			return {
				walletList: [{
						"amount": "0",
						"currencyVo": {
							"currency": "RUB",
							"icon": "https://www.omlook.com/imol/2023/05/17/10/ac92319f991143dd99189b4c66c0f629.png",
							"isOpen": 1,
						}
					},
					{
						"amount": "0",
						"currencyVo": {
							"currency": "USD",
							"icon": "https://www.omlook.com/imol/2023/05/17/10/eec3e8767eea40cda349f2fc884f1993.png",
							"isOpen": 1,
						}
					},
					{
						"amount": "0",
						"currencyVo": {
							"currency": "EUR",
							"icon": "",
							"isOpen": 0,
						}
					},
					{
						"amount": "0",
						"currencyVo": {
							"currency": "CNY",
							"icon": "https://www.omlook.com/imol/2023/05/17/10/290986f9aea542848d3a3e6cbd3e4389.png",
							"isOpen": 1,
						}
					}
				]
			}
		},
		onShow() {
			this._getWalletList()
		},
		computed: {
			filterList() {
				this.walletList = this.walletList?.filter(t => t.currencyVo?.isOpen == 1)
				this.walletList?.forEach((item, index) => {
					if (item.currencyVo?.currency == 'USD') {
						// 美元始终放在最后一位
						this.walletList.splice(index, 1)
						this.walletList.push(item)
					}
				})
				return this.walletList
			}
		},
		// 监听页面返回
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.goBack();
			return true;
		},
		methods: {
			showMsg() {
				uni.showToast({
					title: this.$t('InDevelopment'),
					icon: 'none'
				});
			},
			goback() {
				uni.switchTab({
					url: '/pages/user/User'
				})
			},
			async _getWalletList() {
				uni.showLoading()
				const {
					success,
					result
				} = await getWalletList()
				uni.hideLoading()
				if (success) {
					this.walletList = result.rows.filter(t=>t.currencyVo)
				}
			},
			getCurrencyType(type) {
				switch (type) {
					case 'USD':
						return '$'
					case 'CNY':
						return '¥'
					case 'RUB':
						return '₽'
					default:
						break;
				}
			},
			getTimestamp() {
				return (new Date()).valueOf();
			},
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			},
			toDetails() {
				uni.navigateTo({
					url: '/pagesUser/wallet/WalletDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.mb-40 {
		margin-bottom: 40rpx;
	}

	.wrapper {
		.u-nav-slot {
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.header-bg {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100vh;
			background: linear-gradient(0deg, #A7EFD6 0%, #61BDB2 100%);
			z-index: 0;
		}

		.content {
			z-index: 11;
			position: relative;
			margin-top: calc(44px + var(--status-bar-height));
			box-sizing: border-box;
			padding: 10upx 30rpx;

			.cell-group:first-child {
				margin-bottom: 80rpx;
			}

			.cell-group {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20upx;
				box-sizing: border-box;
				padding: 0 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;

				&>view:last-child {
					border-bottom: none;
				}

				.cell-line {
					padding: 30rpx 30rpx 40rpx 20rpx;
					border-bottom: 2upx solid #F6F6F6;

					&__top {
						display: flex;

						.flag-image {
							width: 56rpx;
							height: 42rpx;
						}

						&__name {
							font-size: 30rpx;
							font-weight: 600;
							margin-left: 20rpx;
						}

						&__money {
							font-size: 36rpx;
							font-weight: 600;
							color: #000000;
							margin-left: auto;
						}
					}

					&__bottom {
						font-size: 24rpx;
						color: #878787;
						margin-left: 76rpx;
					}
				}

				.cell-item {
					height: 112upx;
					display: flex;
					align-items: center;
					border-bottom: 2upx solid #F6F6F6;

					.icon {
						width: 60upx;
						height: 60upx;
						line-height: 60rpx;
						text-align: center;
						background: #F5A527;
						border-radius: 50%;

						.my-icon {
							font-size: 34rpx;
							color: #FFFFFF;
						}

						.icon-quan {
							font-size: 42rpx;
						}
					}

					.green {
						background: #69DA94;
					}

					.blue {
						background: #6AB2E5;
					}

					.cell-text {
						margin-left: 30upx;
						flex: 1;
						font-size: 30upx;
						font-weight: 400;
						color: #000000;
					}

					.arrow-icon {
						color: #A6A6A6;
						font-size: 30upx;
					}
				}
			}
		}
	}
</style>
